.ol-custom-layer-tree {
  --list-active: rgba(51, 133, 255, 0.3);

  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 1000;
  width: 300px;
  /* height: 900px; */
  background-color: rgba(39, 44, 54, 0.9);
  border-radius: 4px;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
}

.ol-custom-layer-tree .ol-layer-tree-header {
  height: 40px;
  background-color: #464c5a;
  padding: 0 5px 0 10px;
  border-radius: 4px 4px 0 0;
  color: #fff;
  font-size: 16px;
  line-height: 40px;
  cursor: move;
}

.ol-custom-layer-tree .ol-layer-tree-content {
  min-height: 300px;
  padding: 20px 0;
  overflow-y: auto;
}

.ol-layer-tree-content .el-tree {
  background-color: transparent;
  color: #fff;
}

.custom-tree-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* gap: 10px; */
  width: 100%;
}

.custom-tree-node .el-slider {
  transform: scale(0.7);
}

.ol-header-toggle {
  font-size: 18px;
  padding: 0 10px;
  transition: transform 0.2s;
}

.ol-layer-tree-content {
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s;
}

/* el-tree节点样式 */
.ol-layer-tree-content .el-tree-node__content {
  transition: background-color 0.2s ease;
}

/* hover状态 */
.ol-layer-tree-content .el-tree-node__content:hover {
  background-color: var(--list-active) !important;
}

/* 选中状态 */
.ol-layer-tree-content .el-tree-node.is-current > .el-tree-node__content {
  background-color: var(--list-active) !important;
}

/* 选中状态下的hover */
.ol-layer-tree-content .el-tree-node.is-current > .el-tree-node__content:hover {
  background-color: var(--list-active) !important;
}

.ol-layer-tree-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  color: #9e9e9e;
  font-size: 12px;
}
